<template>
  <div class="game-container">
    <div class="game-operations">
      <div class="item" @click="showCreateDialog">
        <span class="title">创建房间</span>
      </div>
      <div class="item" @click="searchRoom">
        <span class="title">搜索房间</span>
      </div>
    </div>

    <el-dialog
      title="搜索房间"
      width="50%"
      v-model="roomData.roomListDialogVisible"
    >
      <div>
        <el-input
          v-model="roomData.roomId"
          placeholder="请输入房间号"
        ></el-input>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="roomData.roomListDialogVisible = false"
            >取消</el-button
          >
          <el-button type="primary" @click="handleSearchRoom"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      title="创建房间"
      width="50%"
      v-model="createRoomData.createDialogVisible"
    >
      <div></div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="createRoomData.createDialogVisible = false"
            >取消</el-button
          >
          <el-button type="primary" @click="handleCreateRoom"> 创建 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'
import { reactive } from 'vue'
import { getRoom, createRoom, joinRoom } from '../../api/api.js'
import { useRouter } from 'vue-router'

const store = useStore()

const router = useRouter()

const roomData = reactive({
  roomId: null,
  roomListDialogVisible: false,
})

const createRoomData = reactive({
  createDialogVisible: false,
})

const searchRoom = async () => {
  roomData.roomListDialogVisible = true
}

const handleSearchRoom = async () => {
  const { data: response } = await getRoom(roomData.roomId)

  if (response.data == null) {
    return ElMessage.error('房间号不存在')
  }

  router.push(`/room/${response.data.id}`)
}

const showCreateDialog = () => {
  createRoomData.createDialogVisible = true
}

const handleCreateRoom = async () => {
  const { data: response } = await createRoom(store.state.userinfo)

  if (response.code == 200) {
    ElMessage({
      type: 'success',
      message: '创建成功',
    })
    // store.state.playerinfo = response.data
    router.push(`/room/${response.data.id}`)
  }
}
</script>

<style scoped>
.game-container {
  height: 100%;
  width: 100%;
  flex-direction: row;
  display: flex;
  justify-content: space-around;
}

.mode-selection {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.mode-selection .mode-item {
  width: 150px;
  height: 150px;
  color: #6dd5ca;
  box-shadow: 0 0 10px 5px #000;
}

.mode-item.easy-mode {
  background: url(src/assets/imgs/mode.jpg) no-repeat;
  background-size: cover;
  border-radius: 20px;
}

.mode-item .title {
  font-weight: bold;
  font-size: 24px;
}

.game-operations {
  width: 200px;
  padding: 10px;
}

.game-operations .item {
  cursor: pointer;
  width: 100%;
  height: 60px;
  margin: 10px 5px;
  border-radius: 10px;
  background-color: #6dd5ca;
  position: relative;
}

.game-operations .item .title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
